import { messages } from "share/common";
import React, { Component } from "react";
import Selector from "components/selector";
import moment from "moment";
import DateRangePicker from "components/date-range-picker";
import ReactDOM from "react-dom";
import { Icon, Tag, Tooltip } from "antd";
import Condition from 'components/condition'
import { hasValue } from './utils'
const { If } = Condition;
import 'styles/components/advanced-search/advanced-search-tag-list.scss'

class AdvancedSearchTagList extends Component {

  state = {
    listStyle: {}
  };

  filterTagIndex = 0;

  listRef = null;

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  static getFilterTags = (values, searchForm) => {
    let filterTags = [];
    searchForm.filter(field => hasValue(field, values[field.id])).map(field => {
      filterTags.push({
        id: field.id,
        label: field.label,
        showValue: AdvancedSearchTagList.getFilterTagsShowValue(field, values[field.id])
      })
    });
    return filterTags;
  };

  static getFilterTagsShowValue = (field, value) => {
    if(field.tagParser) {
      return field.tagParser(value);
    }
    if(typeof field.component === 'string') {
      const { props = {} } = field;
      switch(field.component) {
        case 'Input':
        case 'Inputter':
          return value;
        case 'Selector':
          let selectorLabel = (props.selectorItem || Selector.getSelectorData(props.type)).label;
          return typeof selectorLabel === 'string' ? value[selectorLabel] : selectorLabel(value);
        case 'Chooser':
        case 'Searcher':
          let single = !(value instanceof Array);
          if(single)
            return value[props.labelKey];
          else {
            let firstLabel = value[0][props.labelKey];
            let valueLength = value.length;
            return valueLength === 1 ? firstLabel : `${firstLabel} 等${valueLength}条`;
          }
        case 'DatePicker':
          return moment(value).utc().format('YYYY-MM-DD');
        case 'DateRangePicker':
          let format = props.format || DateRangePicker.defaultProps.format;
          let parser = props.parser || DateRangePicker.defaultProps.parser;
          let [startDate, endDate] = parser(value);
          return DateRangePicker.getInputValue(startDate, endDate, format);
      }
    }
  };

  moveTagIndex = direction => {
    const { filterTags } = this.props;
    if(
      (this.filterTagIndex === 0 && direction === - 1) ||
      (this.filterTagIndex === filterTags.length - 1 && direction === 1)
    ) {
      void(0);
    } else {
      this.filterTagIndex += direction;
      let listDom = ReactDOM.findDOMNode(this.listRef);
      let tag = listDom.getElementsByClassName('ant-tag')[this.filterTagIndex];
      let transformLeft = tag.getBoundingClientRect().left - listDom.getBoundingClientRect().left;
      let transform = `translateX(-${transformLeft}px)`;
      this.setState({
        listStyle: {
          transform,
          WebkitTransform: transform,
          MsTransform: transform,
          MozTransform: transform
        }
      })
    }
  };

  onCloseTag = tag => {
    //延迟300ms使得Tag关闭动画完整
    setTimeout(() => {
      this.props.onCloseTag(tag);
    }, 300)
  };

  resetList = () => {
    if(this.filterTagIndex !== 0) {
      this.filterTagIndex = 0;
      let transform = 'translateX(0)';
      this.setState({
        listStyle: {
          transform,
          WebkitTransform: transform,
          MsTransform: transform,
          MozTransform: transform
        }
      })
    }
  };

  render() {
    const { listStyle } = this.state;
    const { filterTags, onSearch, onReset } = this.props;
    return (
      <If value={filterTags.length > 0}>
        <div className='advanced-search-filter-tags'>
          <div className='advanced-search-filter-tags-move'>
            <Tooltip title={<span>{messages('components.key1021')/*滚动标签(左)*/}</span>}>
              <Tag onClick={() => this.moveTagIndex(-1)}>
                <Icon type='left'/>
              </Tag>
            </Tooltip>
          </div>
          <div className='advanced-search-filter-tags-list'>
            <div
              ref={list => this.listRef = list}
              style={listStyle}
              className='advanced-search-filter-tags-list-container'
            >
              {filterTags.map(tag => <Tag
                key={tag.id}
                closable
                onClose={() => this.onCloseTag(tag)}
              >
                {tag.label}: {tag.showValue}
              </Tag>)}
            </div>
          </div>
          <div className='advanced-search-filter-tags-move'>
            <Tooltip title={<span>{messages('components.key1022')/*滚动标签(右)*/}</span>}>
              <Tag onClick={() => this.moveTagIndex(1)}>
                <Icon type='right'/>
              </Tag>
            </Tooltip>
          </div>
          <div className='advanced-search-filter-tags-buttons'>
            <Tooltip title={<span>{messages('components.key1023')/*刷新*/}</span>}>
              <Tag color="#4B8DFF" onClick={onSearch}>
                <Icon type='reload'/>
              </Tag>
            </Tooltip>
            <Tooltip title={<span>{messages('components.key1024')/*重置筛选条件*/}</span>}>
              <Tag
                onClick={onReset}
                className='advanced-search-filter-tags-buttons-reset'
              >
                <Icon type='rocket'/>
              </Tag>
            </Tooltip>
          </div>
        </div>
      </If>
    )
  }
}

export default AdvancedSearchTagList;
